<template>
	<view>
		<view class="custominfo">
			<el-card class="box-card" style="width: 100%;">
				<table style="width: 470px;">
					<tr class="title">
						<td class="titletd key">客户来源</td>
						<td class="titletd key">客户等级</td>
						<td class="titletd key">跟进状态</td>
					</tr>
					<tr class="content">
						<td class="titletd">{{custom.source}}</td>
						<td class="titletd">{{custom.level}}</td>
						<td class="titletd">{{custom.followStatus}}</td>
					</tr>
					<tr class="title">
						<td class="titletd key">意向产品</td>
						<td class="titletd key">公司职位</td>
						<td class="titletd key">联系电话</td>
					</tr>
					<tr class="content">
						<td class="titletd">{{custom.intendedProducts}}</td>
						<td class="titletd">{{custom.appointment}}</td>
						<td class="titletd">{{custom.tel}}</td>
					</tr>
				</table>
			</el-card>
		</view>
		<view class="detail">
			<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" style="width: 100%">
				<el-tab-pane label="资料详情" name="first" width="50rpx">
					<view class="customDetail">
						<table style="width: 470px;height: 100%;">
							<tr>
								<td class="key">客户简介</td>
								<td>{{ custom.introduction }}</td>
							</tr>
							<tr>
								<td class="key">联系邮箱</td>
								<td>{{ custom.email }}</td>
							</tr>
							<tr>
								<td class="key">所属地区</td>
								<td>{{ custom.district }}</td>
							</tr>
							<tr>
								<td class="key">信用代码</td>
								<td>{{ custom.creditCode }}</td>
							</tr>
							<tr>
								<td class="key">客户联系人</td>
								<td>{{ custom.contacts }}</td>
							</tr>
							<tr>
								<td class="key">性别</td>
								<td>{{ custom.sex }}</td>
							</tr>
							<tr>
								<td class="key">生日</td>
								<td>{{ custom.birthday }}</td>
							</tr>
							<tr>
								<td class="key">公司职位</td>
								<td>{{ custom.appointment }}</td>
							</tr>
							<tr>
								<td class="key">联系电话</td>
								<td>{{ custom.tel }}</td>
							</tr>
							<tr>
								<td class="key">意向产品</td>
								<td>{{ custom.intendedProducts }}</td>
							</tr>
							<tr>
								<td class="key">跟进时间</td>
								<td>{{ custom.followTime }}</td>
							</tr>
							<tr>
								<td class="key">备注</td>
								<td>{{ custom.note }}</td>
							</tr>
						</table>
						<view style="height: 60px;"></view>
					</view>
					<!-- <ul class="infinite-list" v-infinite-scroll="load" style="overflow:visible">
						
					</ul> -->
				</el-tab-pane>
				<el-tab-pane label="跟进信息" name="second">
					<el-col :span="25">
						<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
							<li v-for="folloinfoitem in followinfo" class="infinite-list-item">
								<view>{{folloinfoitem.followTime}}</view>
								<el-card shadow="always" style="height: 100%;width: 400px;margin-bottom: 10px;">
									<view class="followinfo">
										<table style="width: 470px;">
											<tr>
												<td>{{custom.name}}</td>
												<td>{{folloinfoitem.followWay}}</td>
											</tr>
										</table>
										<div class="followlog">
											<p style="padding: 5px;">跟进记录：{{ folloinfoitem.followLog }}</p>
										</div>
									</view>
								</el-card>
							</li>
						</ul>
						<view style="height: 60px;"></view>
					</el-col>
				</el-tab-pane>
				<el-tab-pane label="合同信息" name="third" width="50px">
					<view class="contract">
						<table style="width: 470px;height: 100%;">
							<tr style="background-color: silver;">
								<h3 style="margin-top: 6px;">客户信息</h3>
							</tr>
							<tr>
								<td class="key">合同编号</td>
								<td>{{ contract.code }}</td>
							</tr>
							<tr>
								<td class="key">合同名称</td>
								<td>{{ contract.name }}</td>
							</tr>
							<tr>
								<td class="key">合同金额</td>
								<td>{{ contract.amount }}</td>
							</tr>
							<tr>
								<td class="key">合同状态</td>
								<td>{{ contract.status }}</td>
							</tr>
							<tr>
								<td class="key">合同类型</td>
								<td>{{ contract.category }}</td>
							</tr>
							<tr>
								<td class="key">合同文件</td>
								<td>{{ contract.file }}</td>
							</tr>
							<tr>
								<td class="key">关联产品</td>
								<td>{{ contract.relatedProduct }}</td>
							</tr>
							<tr style="background-color: silver;">
								<h3 style="margin-top: 6px;">付款信息</h3>
							</tr>
							<tr>
								<td class="key">签订人</td>
								<td>{{ contract.signedPerson }}</td>
							</tr>
							<tr>
								<td class="key">签订时间</td>
								<td>{{ contract.signedTime }}</td>
							</tr>
							<tr>
								<td class="key">到期时间</td>
								<td>{{ contract.expireTime }}</td>
							</tr>
							<tr>
								<td class="key">付款方式</td>
								<td>{{ contract.paymentWay }}</td>
							</tr>
							<tr>
								<td class="key">预付款</td>
								<td>{{ contract.advanceCharge }}</td>
							</tr>
							<tr>
								<td class="key">备注</td>
								<td>{{ contract.note }}</td>
							</tr>
						</table>
						<view style="height: 60px;"></view>
					</view>
				</el-tab-pane>
				<el-tab-pane label="回款信息" name="fourth" width="50px">
					<tr style="background-color: silver;">
						<h3 style="margin-top: 6px;">回款计划</h3>
					</tr>
					<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
						<li v-for="remittanceitem in remittance" class="infinite-list-item" i>
							<el-card shadow="always" style="height: 100%;width: 400px;margin-bottom: 10px;">
								<view class="remittance">
									<table style="width: 400px;">
										回款方式：{{remittanceitem.remittanceWay}}
										<tr>
											<td>回款金额：{{remittanceitem.amount}}</td>
											<td>提醒时间：前一天</td>
										</tr>
										<tr>
											<td>回款比例：{{remittanceitem.remittanceRate}}</td>
											<td>计划回款时间：{{remittanceitem.plannedPaymentTime}}</td>
										</tr>
									</table>
								</view>
							</el-card>
						</li>
					</ul>
					<tr style="background-color: silver;">
						<h3 style="margin-top: 6px;">已回款</h3>
					</tr>
					<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
						<li v-for="haveremittanceitem in haveremittance" class="infinite-list-item" i>
							<el-card shadow="always" style="height: 100%;width: 400px;margin-bottom: 10px;">
								<view class="remittance">
									<table style="width: 400px;">
										回款方式：{{haveremittanceitem.remittanceWay}}
										<tr>
											<td>回款金额：{{haveremittanceitem.amount}}</td>
											<td>提醒时间：前一天</td>
										</tr>
										<tr>
											<td>回款比例：{{haveremittanceitem.remittanceRate}}</td>
											<td>计划回款时间：{{haveremittanceitem.plannedPaymentTime}}</td>
										</tr>
										收款人：{{haveremittanceitem.remittanceRate}}
										<tr>
											<td>逾期天数：{{haveremittanceitem.overdueDays}}</td>
											<td>备注：{{haveremittanceitem.plannedPaymentTime}}</td>
										</tr>
									</table>
								</view>
							</el-card>
						</li>
					</ul>
					<view style="height: 60px;"></view>
				</el-tab-pane>
				<el-tab-pane label="回款进度" name="five" width="50px">
					<view style="margin-left: 50px; float: left;width: 50%;">
						<h4 style="padding: 18px;font-family: 黑体;">合同总金额：{{this.contract.amount}}</h4>
						<h4 style="padding: 18px;font-family: 黑体;">回款总金额：{{this.haveremittanceamount}}</h4>
					</view>
					<view>
						<el-progress type="circle" :percentage="haveremittancerate"></el-progress>
					</view>
				</el-tab-pane>
			</el-tabs>
		</view>
		<view class="option" style="height: 60px;">
			<table style="height: 100%; width: 500px; background-color: gainsboro; margin: auto;">
				<tr style="margin: auto;">
					<td>
						<view @click="addfollowinfo()">
							跟进
						</view>
					</td>
					<td>
						<view @click="addremittance()">
							回款
						</view>
					</td>
					<td>
						<view @click="updateCustomInfo()">
							编辑
						</view>
					</td>
					<td>
						<view @click="back()">
							返回
						</view>
					</td>
				</tr>
			</table>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				userId: 0,
				customId: 0,
				custom: {},
				followinfo: [],
				contract: {},
				remittance: [],
				haveremittance: [],
				haveremittanceamount: 0,
				haveremittancerate: 0
			}
		},
		onLoad(options) {
			this.userId = uni.getStorageSync('id')
			this.customId = options.customId;
			console.log(this.userId + ' ' + this.customId);
			// 获取用户的客户详细信息
			uni.request({
				url: 'http://localhost:8089/crmdemo/custom/queryCustomById', //仅为示例，并非真实接口地址。
				data: {
					customId: this.customId
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == "000000") {
						this.custom = res.data.result
					} else {
						this.$modal.msgError("获取客户详细信息失败")
					}
				}
			});
			// 获取用户的客户跟进信息
			uni.request({
				url: 'http://localhost:8089/crmdemo/followinfo/querytFollowinfo', //仅为示例，并非真实接口地址。
				data: {
					userId: this.userId,
					customId: this.customId
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == "000000") {
						this.followinfo = res.data.result
					} else {
						this.$modal.msgError("获取客户跟进信息失败")
					}
				}
			});
			// 获取客户的合同信息
			uni.request({
				url: 'http://localhost:8089/crmdemo/contract/queryContract', //仅为示例，并非真实接口地址。
				data: {
					userId: this.userId,
					customId: this.customId
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == "000000") {
						this.contract = res.data.result
					} else {
						this.$modal.msgError("获取客户合同信息失败")
					}
				}
			});
			// 获取客户的计划回款信息
			uni.request({
				url: 'http://localhost:8089/crmdemo/remittance/queryRemittance', //仅为示例，并非真实接口地址。
				data: {
					userId: this.userId,
					customId: this.customId
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == "000000") {
						this.remittance = res.data.result
					} else {
						this.$modal.msgError("获取客户回款信息失败")
					}
				}
			});
			//获取客户的已回款信息
			uni.request({
				url: 'http://localhost:8089/crmdemo/remittance/queryHaveRemittance', //仅为示例，并非真实接口地址。
				data: {
					userId: this.userId,
					customId: this.customId
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == "000000") {
						this.haveremittance = res.data.result
					} else {
						this.$modal.msgError("获取客户回款信息失败")
					}
				}
			});
			//获取回款总额及回款总比例
			uni.request({
				url: 'http://localhost:8089/crmdemo/remittance/queryTotalRemittanceAmountAndRateVo', //仅为示例，并非真实接口地址。
				data: {
					userId: this.userId,
					customId: this.customId
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == "000000") {
						this.haveremittanceamount = res.data.result.totalAmount
						this.haveremittancerate = res.data.result.totalRate
						console.log(this.haveremittanceamount+' '+this.haveremittancerate)
					} else {
						this.$modal.msgError("获取客户回款信息失败")
					}
				}
			});
		},
		methods: {
			addfollowinfo() {
				uni.reLaunch({
					url: 'addFollowinfo?customId=' + this.customId
				})
			},
			addremittance() {
				uni.reLaunch({
					url: 'addRemittance?customId=' + this.customId
				})
			},
			updateCustomInfo() {
				uni.reLaunch({
					url: 'updateCustomInfo?customId=' + this.customId
				})
			},
			back() {
				uni.reLaunch({
					url: '/pages/work/index?userId=' + this.userId
				})
			}
		}
	}
</script>

<style>
	.level {
		border: 2px solid red;
		width: 17px;
		text-align: center;
	}

	.followlog {
		margin-top: 7px;
		border: 1px solid lightslategray;
	}

	ul {
		list-style: none;
	}

	li {
		margin-right: 50px;
	}

	table {
		width: 340px;
	}

	td {
		width: 120px;
		text-align-last: left;
		border-bottom: 1px solid silver;
		padding: 8px;
	}

	tr {
		height: 35px;
		width: 150px;
		padding: 8px;
	}

	.key {
		color: cadetblue;
	}

	.titletd {
		width: 93px;
		text-align-last: center;
		border-bottom: 1px solid silver;
		padding: 8px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 480px;
	}

	.detail {
		margin-top: 10px;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.option {
		position: fixed;
		bottom: 0;
	}
</style>